<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <style>
        .active {
            color: cadetblue;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- <div v-on:click="handler">点我</div>
        <div v-bind:style="{color:myColor}"> hello vue</div>
        <div v-bind:style="[myStyle1,myStyle2]">hello vue</div> -->
        <!-- <div v-bind:class="[activeClass,errorClass]">hello vue</div> -->
        <!-- <div v-if="seen">hello vue</div>
        <div v-else>oh no!</div> -->
        <!-- <div class="search">
            <div>分类</div>
            <img src="./case/1.jpg" alt="">
            <img v-on:click="toggle" v-bind:src="imgUrl" alt="图片找不到">
        </div>
        <div class="items" v-for="item in list" :key="item.id" v-show="ifShow">
            <div>{{item.name}}</div>
        </div>
        <input type="text" @keyup.enter = 'alert("开始检索")'> -->
        <!-- <input type="text" v-model="message"> -->
        <!-- message:{{message}}
        <textarea v-model="message"></textarea> -->
        <!-- <input type="checkbox" id="jack" value="jack" v-model="checked">
        <label for="jack">jack</label>
        <input type="checkbox" id="tom" value="tom" v-model="checked">
        <label for="tom">tom</label>
        <input type="checkbox" id="jerry" value="jerry" v-model="checked">
        <label for="jerry">jerry</label>
        checked：{{checked}} -->


        <!-- <input type="radio" value="male" v-model="picked"> 男
        <input type="radio" value="female" v-model="picked"> 女
        <div>性别：{{picked}}</div> -->
        
        <!-- <div>国庆去哪玩：{{selected}}</div>
        <select v-model="selected">
            <option>苏州</option>
            <option>南京</option>
            <option>杭州</option>
        </select> -->
        {{form }}
        <form @submit.prevent="submitHandler">
            文章标题：<input type="text" v-model="form.title"><br>
            所属栏目：
            <select v-model="form.categoryId">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select><br>
            <input type="submit">
        </form>

        



    </div> 
    
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data(){ 
            return {
                form: {
                    title:"默认标题",
                    categoryId:''
                }
            }
        },
        methods:{
            submitHandler(){
                alert(JSON.stringify(this.form))
            }
        }
    })
</script>
</html>


